<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/4/26
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>AjaxDemo</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="static/plugins/Hplus-v.4.1.0/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/animate.css" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">

    <!-- 全局js -->
    <script src="static/plugins/Hplus-v.4.1.0/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/plugins/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>
    <script type="text/javascript">
        // 客户端浏览器验证，通过了验证，返回true；如果没有通过验证，返回 false
        // function doAjax()：定义了一个doAjax的函数
        function doAjax() {
            // jquery的ajax的请求实现
            $.ajax({
                type: "POST", // 请求方式
                url: "ajaxdemo", // 用于向controller层发送请求的页面标志
                data: "userName=admin&userAddress=天津", // post请求的数据参数（该参数会传到UserAjaxController类中的方法中）
                datatype: "json", // 服务器响应的内容类型（json类型）
                success: function (data) { // ajax请求成功时的回调函数
                    // 这里是进行ajax业务逻辑处理的地方
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    $("#ajaxdemo-label").html(data);
                },
                error: function () {
                    //ajax请求发生非错误时的回调函数
                }
            });

        }

        function doAjax2() {
            // jquery的ajax实现的固定格式
            $.ajax({
                type: "POST", // 请求方式
                url: "ajaxdemo2", // 请求的服务器路径
                data: "userName=admin&userAddress=天津", // post请求的数据参数，将后台运行结果返回给data
                datatype: "json", // 服务器响应的内容类型
                success: function (data) { // ajax请求成功时的回调函数(返回的数据)
                    // 这里是进行ajax业务逻辑处理的地方

                    //console.log():主要是方便你调式javascript用的,可以看到所在页面中输出的内容。
                    console.log("ajax data:");
                    console.log(data);
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    //JSON.stringify(data):将date对象转化为字符串，从而在页面中显示
                    $("#ajaxdemo-label").html(JSON.stringify(data));
                },
                error: function () {
                    // ajax请求发生非错误时的回调函数
                }
            });

        }

        function doAjax3() {
            // jquery的ajax实现的固定格式
            $.ajax({
                type: "POST", // 请求方式
                url: "ajaxdemo3", // 请求的服务器路径
                data: "userName=admin&userAddress=天津", // post请求的数据参数
                datatype: "json", // 服务器响应的内容类型
                success: function (data) { // ajax请求成功时的回调函数(返回的数据)
                    // 这里是进行ajax业务逻辑处理的地方

                    //console.log():主要是方便你调式javascript用的,可以看到所在页面中输出的内容。
                    console.log("ajax data:");
                    console.log(data);
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    //JSON.stringify(data):将date对象转化为字符串，从而在页面中显示
                    $("#ajaxdemo-label").html(JSON.stringify(data));
                },
                error: function () {
                    // ajax请求发生非错误时的回调函数
                }
            });

        }

    </script>
</head>
<body>
<div class="ibox-content">
    <form class="form-horizontal">
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">ajaxdemo：</label>

            <div class="col-sm-2">
                <span class="help-block m-b-none" id="ajaxdemo-label" style="color: red"></span>
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <%-- onclick="doAjax()"：当点击按钮请求时，直接调用上方定义的函数 --%>
                <button class="btn btn-primary" type="button" onclick="doAjax()">ajaxDemo1</button>
                <%--                <button class="btn btn-white" type="submit">取消</button>--%>
            </div>
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="button" onclick="doAjax2()">ajaxDemo2</button>
                <%--                <button class="btn btn-white" type="submit">取消</button>--%>
            </div>
        </div>
    </form>
</div>

</body>
</html>

